<template>
  <transition name="fade">
    <div class="transparent-tip" v-if="show" >
      {{ text}}
    </div>
  </transition>
</template>

<script setup>
import { ref,defineProps } from 'vue';
const props = defineProps({
    text: {
      type: String,
      default: '暂无内容'
    },
    show: {
      type: Boolean,
      default: true
    }
  })
</script>

<style scoped>
.transparent-tip {
  background-color: transparent;
  padding: 8px;
  font-size: 15px;
  color: #808695;
  text-align: center;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>